<template>
  <div v-if="layerNav">
    <Menu />
  </div>
  <div class="h-57">
    <div class="tabbar">
      <div class="item" @click="goToPage('more')">
        <div :class="activeVal == 'more' ? 'borderTop' : 'borderTopBoxs'"></div>
        <div :class="activeVal == 'more' ? 'activeTabText' : ''">
          <svg-icon
            class="svg_icon text-[20px] text-[#b1bad3]"
            name="search"
            :class="activeVal == 'more' ? 'activeTabText' : ''"
          />
          <text :class="activeVal == 'more' ? 'activeTabText' : ''">{{
            $t("page.tabbar.browse")
          }}</text>
        </div>
        <div></div>
      </div>
      <!-- <div class="item" @click="goToPage('home')">
        <img src="../../assets/home/footer-home.png" alt="home" />
        <text>{{ $t("page.tabbar.home") }}</text>
      </div> -->

      <div class="item" @click="goToPage('recharge')">
        <div
          :class="activeVal == 'recharge' ? 'borderTop' : 'borderTopBoxs'"
        ></div>
        <div>
          <svg-icon
            class="svg_icon text-[20px] text-[#b1bad3]"
            name="Game"
            :class="activeVal == 'recharge' ? 'activeTabText' : ''"
          />
          <text :class="activeVal == 'recharge' ? 'activeTabText' : ''">{{
            $t("page.tabbar.casino")
          }}</text>
        </div>
        <div></div>
      </div>
      <div class="item" @click="goToPage('promotions')">
        <div
          :class="activeVal == 'promotions' ? 'borderTop' : 'borderTopBoxs'"
        ></div>
        <div>
          <svg-icon
            class="svg_icon text-[16px] text-[#b1bad3]"
            name="sports"
            :class="activeVal == 'promotions' ? 'activeTabText' : ''"
          />
          <text :class="activeVal == 'promotions' ? 'activeTabText' : ''">{{
            $t("page.tabbar.sports")
          }}</text>
        </div>
        <div></div>
      </div>
      <div class="item" @click="goToPage('person')">
        <!-- <img src="../../assets/home/mybet.png" alt="home" /> -->
        <div
          :class="activeVal == 'person' ? 'borderTop' : 'borderTopBoxs'"
        ></div>
        <div>
          <svg-icon
            class="svg_icon text-[16px] text-[#b1bad3]"
            name="Transactions"
            :class="activeVal == 'person' ? 'activeTabText' : ''"
          />
          <text :class="activeVal == 'person' ? 'activeTabText' : ''">{{
            $t("page.tabbar.bets")
          }}</text>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import Menu from "@/components/menu/index.vue";

import { mainAct } from "@/store/activeda";
import { storeToRefs } from "pinia"; //引入pinia转换
const main = mainAct();
const { showPhoneMenu } = storeToRefs(main); //响应式

const layerNav = ref(false);
const router = useRouter();
const route = useRoute();
const activeVal = ref("");

// watch(
//   () => main.menuActiveTab,
//   (newValue, oldValue) => {
//     console.log("newValue", newValue);

//     activeVal.value = newValue;
//   },
//   { immediate: true }
// );

watch(
  () => route.path,
  (newValue, oldValue) => {
    if (newValue) {
      console.log("newValue", newValue);
      switch (newValue) {
        case "/phone":
          activeVal.value = "more";
          break;
        case "/home":
          // activeVal.value = "home";
          break;
        case "/sports":
          activeVal.value = "promotions";
          break;
        case "/casino":
          activeVal.value = "recharge";
          break;
        case "/myBet":
          activeVal.value = "person";
          break;
      }
    }
  },
  { immediate: true }
);

const goToPage = name => {
  console.log("name - name", route.path);
  activeVal.value = name;

  switch (name) {
    case "more":
      // main.showPhoneMenu = true;
      if (route.path == "/phone") return;
      router.push("/phone");
      console.log("more");
      // main.scrollable.scrollTop = 0;
      break;
    case "home":
      if (route.path == "/home") return;
      main.showPhoneMenu = false;
      router.push("/home");
      // main.scrollable.scrollTop = 0;
      break;
    case "promotions":
      if (route.path == "/sports") return;
      router.push("/sports");
      main.showPhoneMenu = false;
      // main.scrollable.scrollTop = 0;
      break;
    case "recharge":
      if (route.path == "/casino") return;
      main.showPhoneMenu = false;
      //跳转路由
      router.push("/casino");
      // main.scrollable.scrollTop = 0;
      break;
    case "person":
      if (route.path == "/myBet") return;
      main.showPhoneMenu = false;
      router.push("/myBet");
      main.scrollable.scrollTop = 0;
      break;
    default:
      break;
  }
};
</script>
<style lang="less" scoped>
@media (min-width: 601px) {
  .h-57 {
    display: none !important;
  }
}
.borderTop {
  display: inline-block;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: #1475e1;
  color: #fff;
}
.borderTopBoxs {
  display: inline-block;
  width: 46px;
  height: 2px;
  border-radius: 2px;
}
.activeTabText {
  color: #fff !important;
}
.h-57 {
  width: 100%;
  height: 68px;

  .tabbar {
    /*width: calc(100% - 2.4rem);*/
    width: 100%;
    padding: 0 1.2rem;
    height: 68px;
    background-color: #0f212e;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    bottom: 0;
    z-index: 1001;
    .item {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      cursor: pointer;

      .svg_icon {
        margin: 0 auto;
      }

      img {
        /* width: 16px;
        height: 16px; */
      }
      text {
        margin-top: 4px;
        font-size: 12px;
        font-weight: 600;
        color: #b1bad3;
        text-align: center;
      }
    }
  }
}
</style>
